<template>
  <div id="functionPage">
    <HeadNav type="admin" ref="head" :show="1"></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="admin" sort="adminIndex"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container">
            <div class="model-container">
              <div class="model-bg" style="padding: 0 15px">
                <a-tabs :activeKey="tabKey" @change="callback">
                  <a-tab-pane key="1" tab="功能模块"></a-tab-pane>
                  <a-tab-pane key="2" tab="功能权限配置"></a-tab-pane>
                </a-tabs>
              </div>
            </div>
            <div v-if="powerType == 1">
              <div
                class="clearfix"
                v-if="tabKey == '1'"
                style="min-height: 600px"
              >
                <div
                  class="function-list float-left"
                  v-for="(item, index) in modelList"
                  :key="index"
                >
                  <div class="function-tags" v-if="item.is_order == 1">
                    <div class="text">已订购</div>
                    <div class="arrow"></div>
                    <div class="shadow"></div>
                  </div>
                  <div>
                    <img :src="item.image" width="80px" height="80px" alt="" />
                  </div>
                  <div class="title">{{ item.title }}</div>
                  <div class="desc">{{ item.desc }}</div>
                  <div>
                    ￥<span class="price">{{ item.price }}</span
                    ><span v-if="item.type == 1">/年</span
                    ><span v-if="item.type == 2">/月</span
                    ><span v-if="item.type == 3">/次</span>
                  </div>
                  <div class="btn">
                    <a-button
                      type="primary"
                      style="width: 90px"
                      v-if="(item.is_order == 0 || item.is_order == -1) && item.state == 1"
                      @click="openModal(item, index)"
                      >订购</a-button
                    >
                    <a-button
                      @mouseover="mouseOver(item, index)"
                      @mouseout="mouseOut(item, index)"
                      style="width: 90px; border-color: #4576db !important"
                      @click="openModal(item, index)"
                      v-if="item.is_order == 1 && item.price > 0 && item.state == 1"
                      >{{ item.text }}</a-button
                    >
                    <a-button
                      style="width: 90px; border-color: #4576db !important"
                      @click="openModal(item, index)"
                      v-if="item.is_order == 1 && item.price == 0 && item.state == 1"
                      >免费</a-button
                    >
                    <a-button
                      type="primary"
                      style="width: 90px"
                      v-if="item.state == 0"
                      >敬请期待</a-button
                    >
                  </div>
                  <div class="end" v-if="item.is_order == 1">
                    <span v-if="item.effective > 0">{{ item.start_date }}起生效</span>
                    <span v-else>有效期至{{ item.end_date }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="model-container" v-else>
              <div class="model-bg" style="height: 600px">
                <PageNoPower></PageNoPower>
              </div>
            </div>
            <div class="model-container" v-if="tabKey == '2'">
              <div
                class="model-bg"
                v-if="powerType == 1"
                style="min-height: 660px"
              >
                <div class="section-title clearfix">
                  <div class="float-left">{{ organization_name }} 功能配置</div>
                  <div class="float-right">
                    <span class="click-font">了解全部功能模块</span>
                  </div>
                </div>
                <!-- 内容 -->
                <div class="content common">
                  <div class="search">
                    <a-input-search
                      placeholder="搜索功能名称"
                      enter-button="搜索"
                      size="large"
                      @search="onSearch"
                      v-model="inputVal"
                      style="width: 800px"
                    >
                      <div slot="prefix">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-search" />
                        </svg>
                        <span class="rowLine">|</span>
                      </div>
                    </a-input-search>
                  </div>
                  <div class="function">
                    <div class="left-cate">
                      <div
                        :class="
                          chooseType == 0 ? 'cate-block active' : 'cate-block'
                        "
                        @click="choose($event)"
                      >
                        全部
                      </div>
                      <div class="line"></div>
                      <div
                        :class="
                          chooseType == 1 ? 'cate-block active' : 'cate-block'
                        "
                        @click="choose($event)"
                      >
                        本社
                      </div>
                      <div
                        :class="
                          chooseType == 2 ? 'cate-block active' : 'cate-block'
                        "
                        @click="choose($event)"
                      >
                        竞争
                      </div>
                      <div
                        :class="
                          chooseType == 3 ? 'cate-block active' : 'cate-block'
                        "
                        @click="choose($event)"
                      >
                        行业
                      </div>
                      <div
                        :class="
                          chooseType == 4 ? 'cate-block active' : 'cate-block'
                        "
                        @click="choose($event)"
                      >
                        应用
                      </div>
                    </div>
                    <div class="right-table">
                      <div class="table">
                        <table style="table-layout: fixed">
                          <colgroup>
                            <col width="225" />
                            <col width="150" />
                            <col width="300" />
                            <col width="200" />
                          </colgroup>
                          <thead>
                            <tr>
                              <td>功能名称</td>
                              <td>归属</td>
                              <td>功能说明</td>
                              <td style="text-align: right">操作</td>
                            </tr>
                          </thead>
                          <tbody v-if="showList.length > 0">
                            <tr v-for="(item, index) in showList" :key="index">
                              <td>
                                <span class="main-font">{{ item.title }}</span>
                              </td>
                              <td>
                                <div
                                  class="main-font"
                                  style="line-height: 36px"
                                >
                                  {{ item.group }}
                                </div>
                              </td>
                              <td>{{ item.auth_desc }}</td>
                              <td style="text-align: right">
                                <span v-if="item.click" class="click-font"
                                  ><a-switch
                                    default-checked
                                    v-model="item.status"
                                    @change="onChange(item, index, $event)"
                                /></span>
                                <span v-else>{{ item.click_desc }}</span>
                              </td>
                            </tr>
                          </tbody>
                          <tbody v-else>
                            <tr>
                              <td colspan="4" style="text-align: center">
                                <a-empty />
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
                v-else
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
    <!-- 详情弹层 -->
    <a-modal
      v-model="handleModal"
      width="600px"
      destroyOnClose
      :closable="false"
      :footer="null"
      :title="null"
      on-ok="handleOk"
    >
      <div class="popup">
        <div class="option">
          <span class="lable">功能名称</span>
          <div class="normal">{{ modelInfo.title }}</div>
        </div>
        <div class="option">
          <span class="lable">档位</span>
          <div class="normal">
            <a-radio-group
              v-model="modelInfo.level"
              @change="levelChange"
              size="small"
            >
              <a-radio
                :value="item.level_id"
                v-for="(item, index) in modelInfo.levels"
                :key="index"
                >{{ item.level_name }}</a-radio
              >
            </a-radio-group>
          </div>
        </div>
        <div class="option">
          <span class="lable">订购价格</span>
          <div class="normal">
            {{ modelInfo.dprice }}<span v-if="modelInfo.type == 1">/年</span
            ><span v-if="modelInfo.type == 2">/月</span
            ><span v-if="modelInfo.type == 3">/次</span>
          </div>
        </div>
        <div class="option">
          <span class="lable">状态</span>
          <div class="normal">
            <a-radio-group
              :defaultValue="modelInfo.status"
              @change="statusChange"
              size="small"
            >
              <a-radio :value="1">开通</a-radio>
              <a-radio :value="0">关闭</a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="option">
          <span class="lable event" style="vertical-align: top; margin-top: 7px"
            >有效期</span
          >
          <div class="normal event">
            <div style="margin-bottom: 10px">
              <a-range-picker
                format="YYYY-MM-DD"
                @change="conChange"
                inputReadOnly
                :value="[modelInfo.start_date, modelInfo.end_date]"
              />
            </div>
          </div>
        </div>
      </div>
      <div style="text-align:center;padding-bottom:30px;">
        <a-button style="width:80px;" type="primary" @click="handleOk">确定</a-button>
        <span class="click-font" style="margin-left:20px;" @click="handleCancel">取消</span>
      </div>
    </a-modal>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/admin/function.scss"></style>
<script>
import {
  ORGANIZATION_AUTH_GETS,
  ORGANIZATION_AUTH_EDIT,
  ORGANIZATION_PERMISSION_GETS,
  ORGANIZATION_PERMISSION_UPDATE,
} from "../../apis/admin.js";
export default {
  data() {
    return {
      powerType: 2,
      chooseType: 0,
      organization_id: 0,
      organization_name: "",
      allList: [],
      publishList: [],
      competeList: [],
      industyList: [],
      applicationList: [],
      showList: [],
      inputVal: "",
      objInfo: {},
      isLoading: true,
      tabKey: "1",
      modelList: [],
      handleModal: false,
      modelInfo: {},
    };
  },
  mounted() {
    this.powerType = this.$refs.head.accountInfo.type;
    this.organization_id = this.$route.query.organization_id;
    this.organization_name = this.$route.query.organization_name;
    if (this.powerType == 1) {
      this.getData();
      this.getFunction();
    } else {
      this.isLoading = false;
    }
  },
  updated() {},
  methods: {
    // 获取列表
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.organization_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await ORGANIZATION_AUTH_GETS(data);
      if (res.code == 0) {
        // this.objInfo = res.data;
        this.powerType = 1;
        this.allList = [];
        this.publishList = [];
        this.competeList = [];
        this.industyList = [];
        this.applicationList = [];
        this.allList = res.data;
        for (let i = 0; i < this.allList.length; i++) {
          if (this.allList[i].group == "本社") {
            this.publishList.push(this.allList[i]);
          } else if (this.allList[i].group == "竞争") {
            this.competeList.push(this.allList[i]);
          } else if (this.allList[i].group == "行业") {
            this.industyList.push(this.allList[i]);
          } else if (this.allList[i].group == "应用") {
            this.applicationList.push(this.allList[i]);
          }
        }
        this.changeArr();
        this.isLoading = false;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.powerType = 0;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 功能权限修改
    async changeFunction(checked, item) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.organization_id,
        group_id: item.group_id,
        type: checked ? "add" : "",
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await ORGANIZATION_AUTH_EDIT(data);
      if (res.code == 0) {
        this.$refs.head.globalTip(2, "修改成功", 0);
        this.getData();
      } else {
        this.allList = this.allList.map((value, key) => {
          if (item.group_id == value.group_id) {
            value.status = checked ? false : true;
          }
          return value;
        });
        this.changeArr();
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 功能模块列表
    async getFunction() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.organization_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await ORGANIZATION_PERMISSION_GETS(data);
      if (res.code == 0) {
        this.powerType = 1;
        this.modelList = [];
        res.data.map((value, key) => {
          let _obj = value;
          _obj.text = "已订购";
          if(value.start_date){
            _obj.effective = this.$moment(value.start_date.replace(/年|月/g, "-").replace(/日/, "")).diff(this.$moment(), 'days')
          }else{
            _obj.effective = 0;
          }
          this.modelList.push(_obj);
        });
        this.isLoading = false;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.powerType = 0;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    async permissionUpdate() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.organization_id,
        permission_id: this.modelInfo.id,
        level_id: this.modelInfo.level,
        status: this.modelInfo.status,
        start_date: this.modelInfo.start_date,
        end_date: this.modelInfo.end_date,
        timestamp: tStamp,
      };
      if (this.modelInfo.open_id) {
        data.open_id = this.modelInfo.open_id;
      }
      data.sign = this.$getSign(data);
      let res = await ORGANIZATION_PERMISSION_UPDATE(data);
      if (res.code == 0) {
        this.getFunction();
        this.handleModal = false;
        this.$refs.head.globalTip(2, "操作成功！", 0);
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    onChange(item, index, checked) {
      this.changeFunction(checked, item);
    },
    onSearch(value) {
      this.changeArr();
    },
    changeArr() {
      this.showList = [];
      var _list = [];
      if (this.chooseType == 0) {
        _list = this.allList;
      } else if (this.chooseType == 1) {
        _list = this.publishList;
      } else if (this.chooseType == 2) {
        _list = this.competeList;
      } else if (this.chooseType == 3) {
        _list = this.industyList;
      } else if (this.chooseType == 4) {
        _list = this.applicationList;
      }
      var reg = new RegExp(this.inputVal);
      for (let i = 0; i < _list.length; i++) {
        //如果字符串中不包含目标字符会返回-1
        if (_list[i].title.match(reg)) {
          this.showList.push(_list[i]);
        }
      }
    },
    choose(e) {
      var _value = e.srcElement.innerText;
      this.showList = [];
      if (_value == "全部") {
        this.chooseType = 0;
        // this.showList = this.allList;
      } else if (_value == "本社") {
        this.chooseType = 1;
        // this.showList = this.publishList;
      } else if (_value == "竞争") {
        this.chooseType = 2;
        // this.showList = this.competeList;
      } else if (_value == "行业") {
        this.chooseType = 3;
        // this.showList = this.industyList;
      } else if (_value == "应用") {
        this.chooseType = 4;
        // this.showList = this.applicationList;
      }
      this.changeArr();
    },
    callback(key) {
      this.tabKey = key;
    },
    mouseOver(item, index) {
      this.modelList = this.modelList.map((value, key) => {
        if (index == key) {
          value.text = "续订";
        }
        return value;
      });
    },
    mouseOut(item, index) {
      this.modelList = this.modelList.map((value, key) => {
        if (index == key) {
          value.text = "已订购";
        }
        return value;
      });
    },
    // 控制弹层
    handleCancel() {
      this.handleModal = false;
    },
    handleOk() {
      if (this.modelInfo.effect_level_id == 0) {
        this.$refs.head.globalTip(1, "请选择档位！", 0);
        return;
      }
      if (this.modelInfo.start_date.length == 0) {
        this.$refs.head.globalTip(1, "请选择有效期！", 0);
        return;
      }
      var _this = this;
      this.$confirm({
        title: "机构功能模块配置",
        content: "确认修改该机构功能模块配置？",
        okText: "确定",
        cancelText: "取消",
        okType: "danger",
        onOk() {
          _this.permissionUpdate();
        },
        onCancel() {}
      });
    },
    openModal(item, index) {
      let _obj = {};
      _obj.id = item.id;
      _obj.title = item.title;
      _obj.open_id = item.open_id;
      _obj.levels = item.levels;
      _obj.type = item.type;
      _obj.status = 1;
      _obj.start_date = item.start_date
        .replace(/年|月/g, "-")
        .replace(/日/, "");
      _obj.end_date = item.end_date.replace(/年|月/g, "-").replace(/日/, "");
      _obj.dprice = item.price;
      item.levels.map((value,key)=>{
        if(value.price == item.price){
          _obj.level = value.level_id;
        }
      })
      this.modelInfo = _obj;
      this.handleModal = true;
    },
    levelChange() {
      this.modelInfo.levels.map((value, key) => {
        if (this.modelInfo.level == value.level_id) {
          this.modelInfo.dprice = value.price;
        }
      });
    },
    statusChange(e) {
      this.modelInfo.status = e.target.value;
    },
    conChange(date, dateString) {
      this.modelInfo.start_date = dateString[0];
      this.modelInfo.end_date = dateString[1];
    },
  },
};
</script>
